<template>
  <el-row style="width:100%">
    <el-col class="left" :span="18">
      <i class="el-icon-s-home"></i>
      <span>{{ item.name }}</span>
    </el-col>
    <el-col class="right" :span="6">
      <span>{{ item.manager }}</span>
      <el-dropdown @command="mycommand">
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="add">添加子部门</el-dropdown-item>
          <el-dropdown-item command="edit" v-if="!item.isHead">
            查看部门
          </el-dropdown-item>
          <el-dropdown-item command="del" v-if="!item.isHead">
            删除部门
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
import { delDeptApi } from '@/api/departments'
export default {
  // 接收外界传入的一个参数：
  //  label：用来显示当前子节点的文本
  props: ['item'],
  methods: {
    async mycommand (command) {
      if (command === 'add') {
        // 新增
        this.$emit('addShow', this.item.id)
      } else if (command === 'edit') {
        // 修改
        this.$emit('editShow', this.item.id)
      } else if (command === 'del') {
        try {
          // 删除
          // 询问用户是否删除
          await this.$confirm('是否删除当前部门', '警告')
          // 提示删除的数据
          await delDeptApi(this.item.id)
          // 更新数据(在子组件中调用父组件中的方法)
          this.$emit('updateData')
        } catch {
          console.log('出错了！')
        }
      }
    }
  }
}
</script>

<style></style>
